Vue3.2 新特性详解

博主在 b 站录制了 vue3.2 的详细教程，点击来看看吧，新发现哟！

vue3.2 详细教程 —— 01-basic

2021 年 8月10 vue3.2 的正式发布，随之而来是其五大新特性：

其中，对开发者而言，感受最深的是第一条新特性，正如我在 Vue 3.2 Released —— Vue3.2正式发布的五大特性 一文中提到的，这一新特性将极大的提高我们开发者的幸福度和开发效率。具体内容是什么呢？我在上文中并未仔细的分享，本文就这一新特性进行详细的分享，主要包含内容：

所有的内容都是经过实验测试验证的，发现的坑和注意点也是自己在写 demo 的路上总结的，希望分享出来能对大家有些许的帮助。

本文提及的所有 demo、代码均在此仓库中。

是普通的 的语法糖，在运行前会经过一个编译的过程。例如以下这个简单的 SFC (Single File Components)。

从编译的结果可以总结三点，也是 这个糖贯穿始终的三点：

从这三点不知道你有没有猜到些什么？这个语法糖能带来写什么？可以先简单的思考一下

那到底 这个语法糖到底为我们提供了哪些便捷呢？这个糖到底哪儿甜了？和普通的 相比又有哪些优势呢？下面就让我们一起来探究其中奥秘吧！

要使用这个语法，需要将 setup attribute 添加到 代码块上：

里面的代码会被编译成组件 setup() 函数的内容。

这也就意味着与普通的 只在组件被首次引入的时候仅执行一次不同， 中的代码会在每次组件实例被创建的时候执行。这一点非常的重要，也就是写在 中的代码，例如初始化的赋值等在组件每次实例创建时都重新执行一次。

标题似乎有些不太好理解，通俗的讲就是 —— 当使用 的时候，任何在 声明的顶层的绑定 (包括声明的变量，函数声明，以及 import 引入的内容) 都能在模板中直接使用，不再需要使用 return 导出。

相信使用过 vue3 的同学都有这个感受，所有在 中使用的变量，函数，都需要在 中显示 return 导出，不仅写起来麻烦，还有种多次一举的感受，单单这一点就可以节省大量的代码：

以下为上述 SFC 编译后的 JS 代码。

可以看到，编译后 语法糖变成了 并导出了模板 VNode 结构的函数，并且将模板中用到的值进行了引用和自动解包。这就是为什么不再需要显示 return 的原因了。感兴趣的同学也可在 Vue SFC Playground 中测试。

相信看到这里的同学应该会大"哦"一声，“原来是这样的”，在没有看到编译后的结果前，我设想了很多种情况，到看到编译结果后，发现原来是这样，尤大大是真的强呀！！

可以看到编译后的结果中包含了大量的 vue 内置方法和导出 sfc，这属于框架内部的执行，所以所有的 SFC 编译时都会有这些代码。

因此为了简洁在之后的编译结果中就不再罗列这些代码了。

在 vue2.x options API 和使用普通的 的情况下，都可以为组件进行命名，以便再以下三种情况对组件进行定位或使用：

但是在 下，却并没有提供直接的方式来设置的组件的名称，因此，vue 在上述情况下会依据它的文件名来自动推断组件名称。

例如：名为 Foo.vue 的文件可以在模板中用 引用它自己，在 devtools 中看到的组件名称也是 Foo。

那是否有办法在同时使用 的情况下可以显示的注册组件名呢？？脑筋急转弯哟！！

答案：在 SFC 中，虽然 中无法显示定义组件名称，但是 是支持的，同时在一个 SFC 是支持 与 同时存在的，因此，可以像下述代码一样显示定义组件名称（其实这个特性从官网是一定看不到的，我最初也没有发现，是因为我在实验 defineExpose 方法时发现的，后续也会提到）

利用 script 自定义组件名称

上述代码在编译后的 js 代码如下，细细的品真的会发现很多有趣的东西，你会发现 普通的 的内容会和 的内容进行 merge，也就自然实现了自定义组件名称。

中引入组件后可直接在模板使用，不再需要注册了。

跟变量和 import 引入的函数一样， 将 MyComponent 看做一个变量来引用。如果你使用过 JSX，那这里的心智模型是一样的。

其 kebab-case 格式的 同样能在模板中使用。不过，强烈建议使用 PascalCase 格式作为组件标签名，以便于更好的一致性，同时也有助于区分原生的自定义元素。

上述代码编译后的 JS 代码如下，同样可以看到 SaySomething 被当做了变量引入

动态组件仍然是使用 is，相对于 vue2.x 没有变化

因为自动组件名推断的缘故，一个单文件组件可以通过它的文件名被其自己所引用。例如：名为 Foo.vue 的组件可以在其模板中用 引用它自己。

请注意这种方式相比于 import 导入的组件和自主注册的组件优先级更低。所有如果有命名的 import 导入和组件的推断名冲突了，可以使用 import 别名导入：

可以使用带点的组件标记，例如 来引用嵌套在对象属性中的组件。这在需要从单个文件中导入多个组件的时候非常有用：

Components/index.ts 用于导出组件

index.vue 基于命名空间使用组件

在描述如何在 使用 props 前，让我们先了解两个概念，运行时声明和类型声明。

运行时声明（runtime declaration）

顾名思义，运行时的声明，也就是需要在运行中才会生效的一种声明。

在这里，运行时声明指对于 props 的类型的声明，这种声明方式 IED 是无法检测和给出提示的，只有在运行后才会给出提示，例如： 这是 options API 的 props 写法，也就是运行时声明。

这样的写法 IDE 是无法检测到 props 是否按照类型进行传递，只能运行后才能检测到，因此这种叫运行时声明。

类型声明（type declaration）

在这里类型声明指基于 ts 的类型检查，对 props 进行类型的约束，因此，要使用类型声明，需要基于 ts，即

vue 官网中提到了这样的一个概念 —— Compiler Macros（翻译过来是编译器宏命令、或者编译时宏命令）

维基百科对宏的定义如下：宏是一种批量处理的称谓。计算机科学里的宏是一种抽象，它根据一系列预定义的规则替换一定的文本模式。解释器或编译器在遇到宏时会自动进行这一模式替换。绝大多数情况下，“宏”这个词的使用时暗示着将小命令或动作转化为一系列指令。

如前所述， 其实是普通的 的语法糖，在运行前会经过一个编译的过程，这个语法糖还提供了一系列的宏命令供开发者使用，在编译的阶段会进行替换。

后续会多次提到这个概念，因此在这里做详细的说明。

为了在 中 声明 props ，必须使用 defineProps API，这是一个宏命令，不需要导入，直接可在 使用且只能在 中使用，有两种方式可以使用这个宏命令类声明 props，运行时声明和类型声明式，不同的方式下使用这个宏命令后 props 将具备不同的类型推断。

使用运行时声明（runtime declaration）

defineProps 运行时声明的基本用法如下，仅支持运行时的校验。

接到的 props 直接可在模板中直接使用，这与 vue2.x 是一致的。编译后的结果如下：

类型声明（type declaration）

defineProps 类型声明的基本用法如下，完美的支持 IDE 的类型推断和检查。

从编译后的结果可以看到，两种方式最终都编译成了普通的 下的 props 模式，并且结果几乎完全一致。不同的在于是否完美的支持 IDE 的类型推断和检查。

不能同时使用运行时声明和类型声明

defineProps 只能是要么使用运行时声明，要么使用类型声明。同时使用两种声明方式会导致编译报错

使用类型声明的时候，静态分析(也就是约束的类型) 会自动生成等效的运行时声明（2.4.3-2 编译后的结果可以看到），以确保正确的运行时行为

截至目前，类型声明参数必须是以下内容之一，以确保正确的静态分析：

类型字面量，如 string, number, boolean 等

在同一文件中的 interface 或类型字面量的引用

说得更通俗一些就是，props 的 ts 接口只能写在本文件中，如下所示

上面代码会被编译为等价的运行时 props 的 default 选项，如下所示。此外，withDefaults 辅助函数提供了对默认值的类型检查，并确保返回的 props 的类型删除了已声明默认值的属性的可选标志。

widthDefaults 是为了给 defineProps 使用类型声明时提供添加默认值的的方法，因此，需要注意这仅仅适用于 且 defineProps 使用类型声明。

在 中 声明 emit ，必须使用 defineEmits API，这也是一个宏命令。同样可采用运行时声明和类型声明式，在类型声明下 emit 将具备完美的类型推断。

运行时声明

类型声明式

跟 defineProps 一样，运行时声明和类型声明式同样不可同时使用，且类型声明只能用于在 ts 环境下。

官方文档指出默认情况下使用 的组件是默认关闭的，也就是说通过模板 ref 或者 $parent 链获取到的组件的实例，并不会暴露任何在 中声明的绑定（变量，函数）。

为了在 组件中明确要暴露出去的属性，那么就需要使用 defineExpose 这个宏命令。

当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

在我的实验过程中，我居然发现，不管有没有显示暴露，都可以拿到！！很奇怪！！

不知道大家能不能猜到是因为什么原因，我在 中并没有显示暴露，但是却能获取到呢？ 可以看看 DefineExposeWithNormalScript.vue 文件便知道了。

原来是因为我不仅仅使用了 ，同时为了给组件命名，还添加了一个普通的 标签，我们都知道,当仅仅使用 时，是需要在 函数中显示得使用 return 才能暴露的，但是这里为何添加了一个 普通的 标签后就全量的暴露了，我也检查了编译后的代码，暂未找出具体的原因，恐怕需要查看源码才能真正的看透其中奥秘了。

不过，这个实验给我们提供了一个办法，那就是当需要向外暴露很多数据或者方法时（当然，这种情况很少见，就当是钻vue 中一个有趣的空子玩玩好了），使用 defineExpose 这种标准的暴露方式当然是可行的，但是过多了我们又不想写，那么可以采取这种”巧妙的办法“来全量暴露，但至于这种暴露方式是否有什么缺陷，还有待验证。

在 使用 slots 和 attrs 的情况应该是很罕见的，因为可以在模板中直接可通过 $slots 和 $attrs 来访问它们。

在那些罕见的需要使用它们的场景中，可以分别用 useSlots 和 useAttrs 两个函数来获取到对应的信息：

useSlots 和 useAttrs 是真实的运行时函数，它会返回与 setupContext.slots 和 setupContext.attrs 等价的值，同样也能在普通的 composition API 中使用。

可以和普通的 一起使用。普通的 在有这些需要的情况下或许会被使用到：

实验得知，如果同时使用 和 ，那么将打破 的默认关闭（即外部无法获取组件内部的属性和方法），此时，组件内部的属性和方法都将在外部可获取到，如 ref.xxx

await 的使用必须是要在async 语法糖的包裹下，否者将无法执行，为了更简化代码， 中可以使用顶层 await。

上述代码编译后的结果如下，可以看到编译后的结果不再是 setup 了，而是带有 async 的 setup()， 因此便可以直接在 中使用顶层的 await 了：

另外，await 的表达式会自动编译成在 await 之后保留当前组件实例上下文的格式。 注意： async setup() 必须与 Suspense 组合使用，Suspense 目前还是处于实验阶段的特性。vue 官方提到，在将来的某个发布版本中将开发完成并提供文档 - 如果你现在感兴趣，可以参照 tests 看它是如何工作的。

如果你了解 React 的话，一定知道 React 中有一个 内置组件， 这个组件主要是在组件完成前实现 loading 效果，因为有的组件是需要等待异步结果才渲染的，所以需要一个 loading 过程，那么 vue 这里提到的 "async setup() 必须与 Suspense 组合使用" ，其思想应该是一致的，因为默认情况下 vue 会认为 async setup() 中一定存在顶层的 await 异步，为了更好的交互体验，强制添加一个 Suspense 组件以显示 loading。

所以，思想才是关键，做法是次要的

SFC 的三个模块都可以通过 src 的方式进行导入，如下所示：

但是在 下强烈建议不使用 Src 导入。

由于模块执行语义的差异， 中的代码依赖单文件组件的上下文。当将其移动到外部的 .js 或者 .ts 文件中的时候，对于开发者和工具来说都会感到混乱。因而 不能和 src attribute 一起使用。

scoped 跟 vue2.x 的设计和使用完全是一样的，因此不再赘述。

设计和使用上跟 Vue2.x 是一致的，因此也不多赘述。 唯一新的点是使用 时，可以使用 useCssModule API 获取到 css module 对象。

单文件组件的 标签可以通过 v-bind 这一 CSS 函数将 CSS 的值关联到动态的组件状态上，有了这一特性，可以将大量的动态样式通过状态来驱动了，而不是写动态的 calss 类名或者获取 dom 来动态设置了。

hello

实际的值会被编译成 hash 的 CSS 自定义 property，CSS 本身仍然是静态的。自定义 property 会通过内联样式的方式应用到组件的根元素上，并且在源值变更的时候响应式更新。

上述代码编译后的结果如下，可以看到，编译后的代码会维护一份 hash 值和源值的映射，hash 值用于 css var 函数获取自定义属性，hash 映射源值并保留响应式：

不知道你是否有使用或者听说过 css 的 var 函数，小生我是没有的，因此会在下一小节简单的描述一下

个人非常的喜欢这一新特性，给我一种 css in js 的兴奋感，因此探究了其中的奥秘。

如上所述，在 style 中使用 v-bind 来使用状态以达到动态 css 的目的，最终编译的结果是 vue 维护了 一份 hash 值和源值的映射，hash 值用于 css var 函数获取自定义属性，这个通过代码一眼就能够理解，不太理解的就是这个 css var 函数，先给出总结： var 函数能够将参数替换成预先定义的值。

下面来简单描述一下，相信看完后你就能完全的理解状态驱动的动态 css 的原理

什么是var 函数

**var()函数可以代替元素中任何属性中的值的任何部分。var()**函数不能作为属性名、选择器或者其他除了属性值之外的值（这样做通常会产生无效的语法或者一个没有关联到变量的值）。

语法

方法的第一个参数是要替换的自定义属性的名称。函数的可选第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值。

注意：自定义属性的回退值允许使用逗号。例如， var(--foo, red, blue) 将red, blue同时指定为回退值；即是说任何在第一个逗号之后到函数结尾前的值都会被考虑为回退值

值

自定义属性名

在实际应用中它被定义为以两个破折号开始的任何有效标识符。 自定义属性仅供作者和用户使用; CSS 将永远不会给他们超出这里表达的意义。

声明值（后备值）

回退值被用来在自定义属性值无效的情况下保证函数有值。回退值可以包含任何字符，但是部分有特殊含义的字符除外，例如换行符、不匹配的右括号（如)、``]或``}）、感叹号以及顶层分号（不被任何非var**()**的括号包裹的分号，例如var(--bg-color, --bs**;**color)是不合法的，而var(--bg-color, --value**(**bs;color**)**)是合法的）。

示例

在 :root 上定义，然后使用它

当第一个值未定义，回退值生效

兼容性

在 caniuse 上查看结果如下，整体来说兼容性还是不错的。虽然已经明确不再支持 IE，但相信我们的尤大大肯定还是有做兼容处理的，这里先留一个任务给自己，去源码中查看这一部分的兼容处理，然后再分享出来。

看完以上内容，相信 和 v-bind 有让你觉得兴奋，它所带来的这新的特性，不仅可以完美的契合 TS 类型检查和推断，更是极大的提高了开发体验。当然不仅仅是表现层面的，还有 因其将模板编译到了 setup() 函数中所节省的变量引用二次开销，都让 Vue 更上了一个台阶，真的佩服尤大大呀！

文中提到的所有代码均可在仓库中查看。

从 VueConf 2021 尤大大分享完他对 vue 的后续规划开始，就一直在关注 vue3.2，当时尤大大就已经提出了很多的 RFC，那时候大部分特性都还是实验性质的，但是从很多 RFC 中就可以看出 3.2 版本将是一次具有重要意义的革新，果不其然，8.10 的发布 log 以及 尤大大自己的 Released 博客就提出五大令人兴奋的特性，不得不说，尤大大是真的厉害呀！！

细细的品了 以及 v-bind，这些新的写法以及完美的 ts 类型推断和检查，再配上 Volar，写起来真实如丝般顺滑。

说起来，Volar 也是 3.2 版本推出后的必备插件了，下一篇文章就来好好讲讲 Volar 吧，从体验、使用以及和 Ventur 的区别聊聊吧！